<template>
	<div>
		<Bread>
			<template v-slot:title>
				<el-breadcrumb-item v-for="(item, index) in titleList" :key="index">
					{{ item }}</el-breadcrumb-item
				>
			</template></Bread
		>
		<el-card class="box-card">
			<div>
				<el-row class="left">
					<el-button type="primary" @click="add">添加分类</el-button>
				</el-row>
				<!-- 添加分类组件 -->
				<el-dialog
					title="添加分类"
					:visible.sync="dialogVisible"
					width="30%"
					:show-close="false"
				>
					<el-form
						:model="ruleForm"
						:rules="rules"
						ref="ruleForm"
						label-width="100px"
						class="demo-ruleForm"
					>
						<el-form-item label="分类名称" prop="cat_name">
							<el-input v-model="ruleForm.cat_name"></el-input>
						</el-form-item>
						<el-form-item label="父级分类">
							<el-cascader
								v-model="value"
								:options="options"
								expandTrigger=" hover"
								:props="childrens"
								clearable
								@change="handleChange"
							></el-cascader>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisibles">取 消</el-button>
						<el-button type="primary" @click="dialogVisibled">确 定</el-button>
					</span>
				</el-dialog>

				<!-- 树形表格组件 -->
				<TreeTable />
				<CategoriesPagination />
			</div>
		</el-card>
	</div>
</template>

<script>
import Bread from '../../components/Bread.vue'
import TreeTable from '../../components/Categories/TreeTable.vue'
import CategoriesPagination from '../../components/Categories/Pagination.vue'
export default {
	name: 'Categories',
	data() {
		return {
			titleList: ['商品管理', '商品分类'],
			queryInfo: {
				type: 3,
				pagenum: 1,
				pagesize: 5,
			},
			dialogVisible: false,
			ruleForm: {
				cat_name: '',
				cat_pid: 0,
				cat_level: 0,
			},
			rules: {
				cat_name: [
					{ required: true, message: '请输入分类名称', trigger: 'blur' },
				],
			},
			value: [],
			options: [],
			childrens: {
				checkStrictly: true,
				value: 'cat_id',
				label: 'cat_name',
				children: 'children',
			},
		}
	},
	components: {
		Bread,
		TreeTable,
		CategoriesPagination,
	},
	created() {
		this.$store.dispatch('Categories/getData', this.queryInfo)
	},
	methods: {
		dialogVisibles() {
			this.$refs.ruleForm.resetFields()
			this.dialogVisible = false
			this.value = []
			this.ruleForm.cat_pid = 0
			this.ruleForm.cat_level = 0
		},
		dialogVisibled() {  // 确定
			this.$refs.ruleForm.validate(boolean => {
				if (boolean) {
					this.$http
						.post('/categories', this.ruleForm)

						.then(() => {

							this.$message({
								type: 'success',
								message: '添加分类成功！',
							})
						})
						.catch(error => {
							console.log(error.message)
						})
				} else {
					this.$message.error('添加分类失败！')
				}
			})
			this.value = []
			this.ruleForm.cat_pid = 0
			this.ruleForm.cat_level = 0
			this.$store.dispatch('Categories/getData', this.queryInfo)
			this.$refs.ruleForm.resetFields()
			this.dialogVisible = false
		},
		add() {
			this.$http
				.get('/categories', {
					params: {
						type: 2,
					},
				})
				.then(response => {
					let { data, meta } = response.data
					if (meta.status != 200) {
						this.$message.error('获取父级分类数据失败！')
						return
					}
					this.options = data
				})
				.catch(error => {
					console.log(error.message)
				})
			this.dialogVisible = true
		},
		handleChange() {
			if (this.value.length > 0) {
				this.ruleForm.cat_pid = this.value[this.value.length - 1]
				this.ruleForm.cat_level = this.value.length
				return
			} else {
				this.ruleForm.cat_pid = 0
				this.ruleForm.cat_level = 0
			}
		},
	},
}
</script>

<style scoped>
.el-pagination {
	margin-top: 13px;
}
.left {
	text-align: left;
	margin-bottom: 17px;
}
.el-cascader {
	width: 100%;
}
</style>
